Implementación de Tooltips: Información Accesible con Hover y Focus

Los tooltips (o descripciones emergentes) son pequeños mensajes de ayuda contextual que aparecen cuando un usuario sitúa el puntero del ratón sobre un elemento o lo enfoca. Pueden proporcionar información adicional, aclarar el propósito de un elemento u ofrecer pistas sobre cómo usar una función. Sin embargo, los tooltips pueden convertirse fácilmente en pesadillas de accesibilidad si no se implementan correctamente. Esta guía describe las mejores prácticas para crear tooltips que sean utilizables por todos, incluidos los usuarios con discapacidades.

Por Qué la Accesibilidad es Importante para los Tooltips

La accesibilidad no se trata solo de cumplir normativas; se trata de crear una mejor experiencia de usuario para todos. Cuando los tooltips no son accesibles, pueden excluir a los usuarios que dependen de tecnologías de asistencia como lectores de pantalla, navegación por teclado o entrada de voz. Considere estos escenarios:

• Usuarios de lectores de pantalla: Si un tooltip no está marcado correctamente, es posible que un lector de pantalla no anuncie su presencia o contenido.
• Usuarios de teclado: Si un tooltip solo aparece al pasar el ratón por encima (hover), los usuarios de teclado no podrán acceder a él.
• Usuarios con discapacidades motoras: Los movimientos precisos del ratón necesarios para las interacciones de hover pueden ser difíciles o imposibles.
• Usuarios con discapacidades cognitivas: Un tooltip mal sincronizado o confuso puede generar frustración y dificultar la comprensión.

Al seguir las mejores prácticas de accesibilidad, podemos asegurarnos de que los tooltips mejoren en lugar de obstaculizar la experiencia del usuario para todos.

Principios Clave para Tooltips Accesibles

Los siguientes principios son cruciales para crear tooltips accesibles:

1. Proporcionar acceso alternativo: Asegurarse de que los tooltips sean accesibles tanto mediante hover como con el foco del teclado.
2. Usar atributos ARIA: Utilizar atributos ARIA (Accessible Rich Internet Applications) para identificar y describir correctamente los tooltips a las tecnologías de asistencia.
3. Gestionar el foco: Controlar a dónde va el foco cuando se muestra y se oculta un tooltip.
4. Asegurar contraste suficiente: Proporcionar suficiente contraste de color entre el texto y el fondo del tooltip.
5. Permitir tiempo suficiente: Dar a los usuarios tiempo suficiente para leer el contenido del tooltip.
6. Hacerlos descartables: Proporcionar una forma clara de cerrar el tooltip.
7. Evitar el uso excesivo: Usar los tooltips con moderación y solo cuando sea necesario.

Técnicas de Implementación

1. Usando Hover y Focus

El aspecto más crítico de los tooltips accesibles es garantizar que sean accesibles tanto para usuarios de ratón como de teclado. Esto significa que el tooltip debe aparecer tanto al pasar el cursor sobre el elemento (hover) como cuando el elemento recibe el foco.

HTML:

            <a href="#" aria-describedby="tooltip-example">Enlace de Ejemplo</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Este es un tooltip de ejemplo.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Asegura que el tooltip esté por encima */
}

            

              
                Copy
              
            
          

Explicación:

• aria-describedby: Este atributo vincula el enlace con el elemento del tooltip utilizando su ID. Esto informa a las tecnologías de asistencia que el tooltip proporciona información adicional sobre el enlace.
• role="tooltip": Este rol de ARIA identifica el elemento como un tooltip.
• El CSS utiliza el selector de hermano adyacente (+) para mostrar el tooltip cuando el enlace recibe un hover o un focus.

JavaScript (Control Avanzado - Opcional):

Aunque el CSS puede manejar un simple mostrar/ocultar, JavaScript permite un control más robusto, especialmente cuando los tooltips se generan dinámicamente o necesitan un comportamiento más complejo.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. Usando Atributos ARIA

Los atributos ARIA son esenciales para proporcionar información semántica a las tecnologías de asistencia. Aquí hay un desglose de los atributos clave:

• aria-describedby: Como se mencionó anteriormente, este atributo establece la relación entre el elemento desencadenante y el elemento del tooltip.
• role="tooltip": Este atributo define explícitamente el elemento como un tooltip.
• aria-hidden="true"/aria-hidden="false": Úselos para indicar si el tooltip está actualmente visible para las tecnologías de asistencia. Cuando el tooltip está oculto, establezca aria-hidden="true". Cuando es visible, establezca aria-hidden="false". Esto es particularmente importante cuando se usa JavaScript para controlar la visibilidad del tooltip.

Ejemplo:

            <button aria-describedby="help-tooltip">Enviar</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Haga clic aquí para enviar el formulario.</div>
            

              
                Copy
              
            
          

JavaScript (para aria-hidden):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Gestionando el Foco

Cuando aparece un tooltip, generalmente *no debe* robar el foco del elemento desencadenante. El foco debe permanecer en el elemento que activó el tooltip. Esto asegura que los usuarios de teclado puedan continuar navegando por la página sin interrupciones inesperadas.

Sin embargo, puede haber situaciones en las que *desee* mover el foco al tooltip, particularmente si el tooltip contiene elementos interactivos (por ejemplo, enlaces, botones). En este caso, asegúrese de que:

• El tooltip sea visualmente distinto para indicar que tiene el foco.
• Haya una forma clara de devolver el foco al elemento desencadenante original (por ejemplo, un botón de cierre dentro del tooltip).

En la mayoría de los casos, se prefiere evitar la gestión del foco dentro del propio tooltip por simplicidad y usabilidad.

4. Asegurando Contraste Suficiente

El contraste de color es crucial para la legibilidad. Asegúrese de que el color del texto en sus tooltips tenga suficiente contraste con el color de fondo. Las Pautas de Accesibilidad al Contenido Web (WCAG) recomiendan una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande (18pt o 14pt en negrita).

Utilice verificadores de contraste en línea para confirmar que sus elecciones de color cumplen con los estándares de accesibilidad. Ejemplos de verificadores de contraste incluyen:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Ejemplo (Buen Contraste):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Ejemplo (Contraste Pobre):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Permitiendo Tiempo Suficiente

Los usuarios necesitan tiempo suficiente para leer el contenido del tooltip. Evite los tooltips que desaparecen demasiado rápido. Si bien no hay un número mágico, apunte a un tiempo mínimo de visualización de unos pocos segundos. Además, el tooltip debe permanecer visible mientras el usuario mantenga el cursor sobre el elemento desencadenante o lo tenga enfocado. Si necesita cerrar el tooltip debido a otros eventos, proporcione un indicador de que el tooltip se cerrará.

Si el contenido del tooltip es extenso, considere proporcionar una forma para que el usuario lo descarte manualmente (por ejemplo, un botón de cierre o presionando la tecla Escape).

6. Haciéndolos Descartables

Aunque los tooltips a menudo desaparecen automáticamente cuando el usuario aleja el ratón o quita el foco, es una buena práctica proporcionar una forma clara de descartarlos manualmente, especialmente para tooltips largos o que contienen elementos interactivos.

Métodos para Descartar Tooltips:

• Botón de cierre: Incluya un botón de cierre visualmente prominente dentro del tooltip.
• Tecla Escape: Permita a los usuarios descartar el tooltip presionando la tecla Escape.
• Clic afuera: Descarte el tooltip cuando el usuario haga clic en cualquier lugar fuera del tooltip y del elemento desencadenante. (Úselo con precaución, ya que puede ser disruptivo).

Ejemplo (Botón de Cierre):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  Este es el contenido de mi tooltip.
  <button onclick="hideTooltip()">Cerrar</button>
</div>
            

              
                Copy
              
            
          

Ejemplo (Tecla Escape):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Reemplace con su función real para ocultar el tooltip
  }
});

            

              
                Copy
              
            
          

7. Evitando el Uso Excesivo

Los tooltips deben usarse con moderación y solo cuando proporcionan información verdaderamente útil. El uso excesivo de tooltips puede saturar la interfaz, distraer a los usuarios y crear una experiencia frustrante.

Alternativas a los Tooltips:

• Etiquetas claras: Use etiquetas claras y descriptivas para campos de formulario, botones y enlaces.
• Ayuda contextual: Proporcione texto de ayuda directamente en la interfaz, cerca de los elementos relevantes.
• Documentación de ayuda: Enlace a documentación de ayuda completa para funciones más complejas.

Consideraciones Avanzadas

Contenido Dinámico

Si el contenido de su tooltip se genera dinámicamente (por ejemplo, se carga desde una API o se actualiza según la entrada del usuario), asegúrese de que el atributo aria-describedby y la visibilidad del tooltip se actualicen en consecuencia. Use JavaScript para gestionar estas actualizaciones.

Posicionamiento

Considere cuidadosamente el posicionamiento de sus tooltips. Evite colocarlos de manera que oculten contenido importante o causen cambios en el diseño. Tenga en cuenta los diferentes tamaños de pantalla y resoluciones, y use CSS para asegurarse de que los tooltips estén siempre visibles dentro del viewport.

Dispositivos Móviles

Los tooltips tradicionalmente dependen de interacciones de hover, que no están disponibles en dispositivos táctiles. Para dispositivos móviles, considere usar métodos de interacción alternativos, como:

• Toque (Tap): Muestre el tooltip cuando el usuario toque el elemento.
• Pulsación larga (Long press): Muestre el tooltip cuando el usuario mantenga presionado el elemento.
• Mostrar al enfocar (Show on focus): Muestre el tooltip cuando el elemento reciba el foco. Esto se puede lograr con JavaScript, verificando el soporte táctil (por ejemplo, `('ontouchstart' in window)`) y alterando el comportamiento de visualización en consecuencia.

Probando tus Tooltips

Pruebe exhaustivamente sus tooltips para asegurarse de que sean accesibles para todos los usuarios. Use una combinación de pruebas manuales y herramientas de prueba de accesibilidad automatizadas.

Métodos de Prueba:

• Navegación por teclado: Verifique que los tooltips sean accesibles usando el teclado.
• Pruebas con lector de pantalla: Use un lector de pantalla para asegurarse de que los tooltips se anuncien correctamente.
• Análisis de contraste de color: Use un verificador de contraste de color para verificar que sea suficiente.
• Pruebas en móviles: Pruebe los tooltips en diferentes dispositivos móviles y tamaños de pantalla.
• Pruebas de accesibilidad automatizadas: Use herramientas como axe DevTools, WAVE o Lighthouse para identificar posibles problemas de accesibilidad.

Internacionalización (i18n) y Localización (l10n)

Al desarrollar tooltips para una audiencia global, tenga en cuenta la internacionalización y la localización:

• Dirección del texto: Admita direcciones de texto de izquierda a derecha (LTR) y de derecha a izquierda (RTL). Use propiedades lógicas de CSS (por ejemplo, `margin-inline-start`, `margin-inline-end`) en lugar de propiedades físicas (por ejemplo, `margin-left`, `margin-right`) para el diseño.
• Traducciones específicas del idioma: Proporcione traducciones del contenido del tooltip para diferentes idiomas.
• Formatos de fecha y hora: Adapte los formatos de fecha y hora a la configuración regional del usuario.
• Formatos de número: Use formatos de número apropiados para diferentes regiones (por ejemplo, separadores decimales, separadores de miles).

Conclusión

Implementar tooltips accesibles requiere una planificación cuidadosa y atención al detalle. Al seguir los principios y técnicas descritos en esta guía, puede crear tooltips que sean utilizables por todos, independientemente de sus habilidades. Recuerde que la accesibilidad es un proceso continuo, así que continúe probando y refinando sus tooltips para asegurarse de que satisfagan las necesidades de todos sus usuarios.

Recursos

• ARIA Authoring Practices Guide (APG) - Tooltip
• Web Content Accessibility Guidelines (WCAG) 2.1
• MDN Web Docs - ARIA